<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="training.entity.User" %>
<%
	User user = (User)request.getAttribute("user");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Account</title>
<style>
	h1 {
		text-align: center;
		color: red;
	}
	
	form {
		width: 400px;
		margin: auto;
	}
	
	div.block {
		overflow: hidden;
		margin-top: 5px;
	}
	div.block label {
		width: 160px;
		display: block;
		float: left;
	}
	div.block input {
		float: left;
	}
	
	input[type="submit"] {
		display: block;
		margin: 0 auto;
	}
	
	#input {
		text-align: center;
	}
	
	#message {
		display: block;
		text-align: center;
		color: red;
	}
	
	div.block .required {
		float: left;
		margin-left: 5px;
		color: red;
	}
</style>
<script>
	function validate() {
		
		if(document.forms[0].account.value == "") {
			document.getElementById("message").innerHTML = "Please input all required field !";
			document.forms[0].account.focus();
			return false;
		}
		
		if(document.forms[0].firstname.value == "") {
			document.getElementById("message").innerHTML = "Please input all required field !";
			document.forms[0].firstname.focus();
			return false;
		}
		
		if(document.forms[0].lastname.value == "") {
			document.getElementById("message").innerHTML = "Please input all required field !";
			document.forms[0].lastname.focus();
			return false;
		}
		
		if(document.forms[0].email.value == "") {
			document.getElementById("message").innerHTML = "Please input all required field !";
			document.forms[0].email.focus();
			return false;
		}
		
		return true;
	}
</script>
</head>
<body>
<h1>Add New User Account</h1>
<form method="POST" action="add.html" onsubmit="return validate();">
	<fieldset>
		<legend>Profile: </legend>
		
		<div class="block">
			<label>Account:</label>
			<input type="text" name="account" /><span class="required">*</span>
		</div>
		<div class="block">
			<label>First Name:</label>
			<input type="text" name="firstname" /><span class="required">*</span>
		</div>
		<div class="block">
			<label>Last Name:</label>
			<input type="text" name="lastname" /><span class="required">*</span>
		</div>
		<div class="block">
			<label>Email:</label>
			<input type="text" name="email" /><span class="required"> *</span>
		</div>
		<div class="block">
			<span id="message"></span>
		</div>
		<div class="block" id="input">
			<input type="submit" value="Add" />
		</div>
	</fieldset>
</form>
</body>
</html>